<template>
  <span>
    <a-button
      type="link"
      v-show="
        itemButtonData.tableButtonAddDTO.menuFlag !== '1' &&
        itemButtonData.buttonEventAddDTO.eventType !== 'query' &&
        ['add', 'edit'].includes(this.dataObj.mode)
      "
      @click="showModal"
      >状态管理</a-button
    >
    <a-modal
      title="状态管理"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :width="800"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-spin :spinning="confirmLoading">
        <a-row>
          <a-checkbox v-model="showRuleConfig.hideButton">隐藏按钮</a-checkbox>
          <a-checkbox
            v-model="showRuleConfig.onlyMeOperate"
            v-if="itemButtonData.tableButtonAddDTO.buttonType === 'data'"
            >只允许本人操作</a-checkbox
          >
          <a-checkbox v-model="showRuleConfig.onlyAdminOperate"
            >只允许管理员操作</a-checkbox
          >
        </a-row>
        <a-row
          v-if="
            !showRuleConfig.hideButton &&
            itemButtonData.tableButtonAddDTO.buttonType === 'data'
          "
          style="margin: 10px 0"
        >
          <a-button type="primary" @click="handleAdd"
            ><icon-plus style="margin-right: 6px" />新增按钮展示逻辑</a-button
          >
        </a-row>
        <a-form :model="showRuleConfig" ref="form">
          <a-row
            v-for="(option, index) in showRuleConfig.fieldConfig"
            :key="index"
            v-if="
              !showRuleConfig.hideButton &&
              itemButtonData.tableButtonAddDTO.buttonType === 'data'
            "
          >
            <a-col>
              <a-form-item style="display: inline-block">当&nbsp;</a-form-item>
              <a-form-item
                style="display: inline-block; min-width: 120px"
                :field="`fieldConfig.${index}.field`"
                :rules="rules.field"
              >
                <a-select
                  v-model="option.field"
                  :show-search="true"
                  :filter-option="filterOption"
                >
                  <a-option
                    v-for="item in nameList"
                    :key="item.dataIndex"
                    :value="item.dataIndex"
                    >{{ item.name }}</a-option
                  >
                </a-select>
              </a-form-item>
              <a-form-item
                style="display: inline-block; margin: 0 5px; min-width: 80px"
              >
                <a-select v-model="option.fieldValueType">
                  <a-option
                    v-for="item in fieldValueTypeList"
                    :key="item.value"
                    :value="item.value"
                    >{{ item.label }}</a-option
                  >
                </a-select>
              </a-form-item>
              <!--            <a-form-item style="display: inline-block" v-if="option.fieldValueType !== 'notEmpty'">&nbsp;值为&nbsp;</a-form-model-item)-->
              <a-form-item
                style="display: inline-block"
                :field="`fieldConfig.${index}.fieldValue`"
                :rules="rules.fieldValue"
                v-if="option.fieldValueType !== 'notEmpty'"
              >
                <a-input
                  placeholder="请输入值"
                  v-model="option.fieldValue"
                ></a-input>
              </a-form-item>
              <a-form-item style="display: inline-block"
                >&nbsp;时展示该按钮</a-form-item
              >
              <a-form-item style="display: inline-block">
                <icon-minus-circle
                  style="margin-left: 5px"
                  @click="handleDeleteItem(index)"
                />
              </a-form-item>
            </a-col>
            <a-col
              style="margin-top: -30px"
              v-if="
                showRuleConfig.fieldConfig.length > 1 &&
                index !== showRuleConfig.fieldConfig.length - 1
              "
            >
              <a-tag
                :color="option.logical === '&&' ? '#108ee9' : ''"
                @click="option.logical = '&&'"
                >并且</a-tag
              >
              <a-tag
                :color="option.logical === '||' ? '#108ee9' : ''"
                @click="option.logical = '||'"
                >或</a-tag
              >
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </span>
</template>

<script>
import _ from "lodash";
import {
  setFocusToFirstFocusableElement,
  parseShowRulesToStr,
} from "@/mixins/methodsMixins";

export default {
  name: "StatusModal",
  inject: ["dataObj"],
  props: {
    buttonData: {
      type: Array,
      default: () => [],
    },
    current: {
      type: Number,
      default: () => null,
    },
  },
  computed: {
    itemButtonData() {
      return this.buttonData[this.current];
    },
    nameList() {
      return this.dataObj.pageData.map((item) => {
        return {
          name: item.formData.name,
          dataIndex: item.formData.dataIndex,
        };
      });
    },
  },
  data() {
    return {
      visible: false,
      rules: {
        plugId: [{ required: true, message: "必填" }],
        dataId: [{ required: true, message: "必填" }],
        field: [{ required: true, message: "必填" }],
        fieldValue: [{ required: true, message: "必填" }],
      },
      fieldValueTypeList: [
        { label: "等于", value: "fixed" },
        { label: "不等于", value: "unequal" },
        { label: "不为空", value: "notEmpty" },
        { label: "小于", value: "lt" }, // fangyan
        { label: "大于", value: "jt" }, // fangyan
      ],
      confirmLoading: false,
      showRuleConfig: {
        hideButton: false,
        onlyMeOperate: false,
        onlyAdminOperate: false,
        fieldConfig: [],
      },
    };
  },
  methods: {
    // 下拉框按label搜索
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 新增规则
    handleAdd() {
      if (this.nameList.length === 0) {
        this.$message.error("无字段状态可配置");
        return;
      }
      const field = this.nameList[0].dataIndex;
      this.showRuleConfig.fieldConfig.push({
        field,
        fieldValue: "",
        logical: "&&",
        fieldValueType: "fixed",
      });
    },
    // 删除字段联动
    handleDeleteItem(index) {
      this.showRuleConfig.fieldConfig.splice(index, 1);
    },
    setFocusToFirstFocusableElement,
    showModal() {
      this.visible = true;
      this.setFocusToFirstFocusableElement();
      console.log(this.dataObj.pageData);
      const isOk = this.dataObj.pageData
        .filter((item) => item.isSendData)
        .every((item) => !!item.formData.dataIndex);
      if (!isOk) {
        this.$message.warn("请补充所有的数据绑定key");
        return;
      }
      const showRuleConfig = _.cloneDeep(this.itemButtonData.showRuleConfig);
      Object.assign(this.showRuleConfig, showRuleConfig, {
        hideButton: this.itemButtonData.hideButton || false,
      }); // 赋值
    },
    parseShowRulesToStr,
    // 生成规则
    handleSubmit() {
      this.itemButtonData.hideButton = this.showRuleConfig.hideButton;
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.itemButtonData.showRule = this.parseShowRulesToStr(
            this.showRuleConfig.fieldConfig
          );
          this.itemButtonData.showRuleConfig = _.cloneDeep(this.showRuleConfig);
          console.log(
            "规则输出",
            this.itemButtonData.showRule,
            this.showRuleConfig
          );
          this.$message.success("规则生成成功");
          console.log(this.dataObj.buttonData);
          this.handleCancel();
        } else {
          this.$message.warn("请检查填写内容");
        }
      });
    },
    handleCancel() {
      this.visible = false;
      Object.assign(this, this.$options.data());
    },
  },
};
</script>
